<script setup lang="ts">
import {
  LINK_PROFILE_ABOUT, LINK_PROFILE_ACCOUNT, LINK_PROFILE_AUTH, LINK_PROFILE_COLLECTION,
  LINK_PROFILE_MESSAGE,
  LINK_PROFILE_PRIVACY_POLICY,
  LINK_PROFILE_PROTOCOL, LINK_PROFILE_PUSH
} from '../../../router/routes/business/user';
import { useUserStore } from '../../../store/modules/user';
import AvatarImg from '@/assets/avatar-default.png';
import Person from '@/assets/person.png';
import PushImg from '@/assets/push.png';
import AboutImg from '@/assets/about.png';
import YjfkImg from '@/assets/yhxy.png';
import YsxyImg from '@/assets/ysxy.png';

import CollectionImg from '@/assets/collection.png';
import FootPrintImg from '@/assets/foot-print.png';
const userStore = useUserStore();

onMounted(() => {
  setStyle();
});

onActivated(() => {
  setStyle();
});

function setStyle () {
  nextTick(() => {
    const layoutContainer = document.getElementsByClassName('layout-container')?.[0] as HTMLElement;
    if (layoutContainer) {
      layoutContainer.style.marginLeft = '0';
    }
  });
}

const PROFILE_LIST = [
  {
    title: '个人资料',
    path: LINK_PROFILE_ACCOUNT,
    icon: Person
  },
  {
    title: '我的收藏',
    path: LINK_PROFILE_COLLECTION,
    icon: CollectionImg
  },
  {
    title: '我的足迹',
    path: '',
    icon: FootPrintImg
  },
  {
    title: '推送设置',
    path: LINK_PROFILE_PUSH,
    icon: PushImg
  },
  {
    title: '关于我们',
    path: LINK_PROFILE_ABOUT,
    icon: AboutImg
  },

  {
    title: '用户协议',
    path: LINK_PROFILE_PRIVACY_POLICY,
    icon: YjfkImg
  },
  {
    title: '隐私政策',
    path: LINK_PROFILE_PROTOCOL,
    icon: YsxyImg
  }

  // {
  //   title: '认证',
  //   path: LINK_PROFILE_AUTH,
  //   // icon: EditImg
  // },
  
];
</script>

<template>
  <vc-side-menu class="user-side-menu" :width="260" :menus="PROFILE_LIST" :menuTopBottomHeight="70">
    <template #top>
      <div class="h-142px flex flex-col">
        <div class="ml-100px mt-16px mb-12px"><vc-avatar :src="userStore.getUserInfo.photo || AvatarImg" :size="60" /></div>
        <div class="flex flex-col">
          <div :title="userStore.getUserInfo.nickname" class="nickname">{{ userStore.getUserInfo.nickname }}</div>
          <div :title="userStore.getUserInfo.company" class="compTitle" v-if="userStore.getUserInfo.company">{{ userStore.getUserInfo.company }}</div>
        </div>
      </div>
    </template>
  </vc-side-menu>
</template>

<style lang="scss" scoped>
:deep(.vc-side-menu__con){
  padding-top: 10px;
}
:deep(.vc-menu-item){
  width: 244px;
  height: 40px;
  margin: 8px 8px;
  span{
    font-weight: 400;
    font-size: 14px;
    height: 40px;
    text-align: center;
    line-height: 40px;
  }
}
.user-side-menu {
  height: 512px !important;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border-right: 0;
  .nickname {
    margin: auto;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    max-width: 130px;
    line-height: 20px;
    word-break: break-all;
    @include line-clamp(1);
  }
  .compTitle {
    margin: auto;
    font-weight: 400;
    font-size: 12px;
    color: #8B8C8C;
    max-width: 130px;
    line-height: 14px;
    word-break: break-all;
    @include line-clamp(1);
  }
}
</style>
